<template>
  <div>
    <input v-model="position"/><button @click="test1">滑动到10</button>
    <div class="wrapper">
      <BScroll ref="bscroll" :func="func" @pullingUp="listenPullingUp" @pullingDown="listenPullingDown" @finishPullDown="test2" @finishPullUp="test3">
        <li :ref="'lii' + index" v-for="(item, index) in list" :key="index">{{item}}</li>
      </BScroll>
    </div>
  </div>
</template>

<script>
  import BScroll from 'vue-bscroll'
  export default {
    data() {
      return {
        position: 0,
        list: [],
        func: {
          // 监听滚动
          listenScroll: true,
          // 监听下拉刷新
          listenPullingDown: true,
          // 监听上拉加载
          listenPullingUp: true
        }
      }
    },
    components: {
      BScroll
    },
    mounted() {
      this.loadData()
    },
    methods: {
      test1() {
        console.log(this.$refs['lii' + this.position][0]);
        this.$refs.bscroll.scrollToElement(this.$refs['lii' + this.position][0], 1000);
      },
      test2() {
        console.log('test2');
      },
      test3() {
        console.log('test3');
      },
      listenPullingDown() {
        this.list = []
        this.loadData()
        setTimeout(() => {
          this.$refs.bscroll.afterRefresh()
        }, 1000)
      },
      listenPullingUp() {
        let _this = this
        setTimeout(() => {
          _this.loadData()
          _this.$refs.bscroll.afterUpload(true)
        }, 1000)
      },
      loadData(callback = () => {}) {
        let length = this.list.length
        let newArr = []
        for (let i = length; i < length + 20; i++) {
          newArr.push(`第${i}条数据`)
        }
        this.list = this.list.concat(newArr)
      }
    }
  }
</script>

<style scoped="">
  .wrapper {
    height: 500px;
    width: 100%;
  }

  .wrapper li {
    height: 48px;
    line-height: 48px;
  }
</style>
